<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/home.css">
    <script src="../js/jquery-3.2.1.min.js"></script>
    <script src="../js/top-foot.js"></script>
    <!--    需要引入的其他外部文件-->
</head>

<body>
<!--主要为了展示-->
<!--写的任何代码都应该在body里面-->
<!--经常需要将div显示出来：div默认透明 边框为0-->
<!--选择器-->
<!--div 默认宽度为浏览器可视宽度-->
<!--<div class="ee">-->
<!--    <div id="aa">头部</div>-->
<!--</div>-->
<!--<div class="bb">中间</div>-->
<!--<div class="cc">-->
<!--    <div>aa</div>-->
<!--    <div>bb</div>-->
<!--</div>-->
<!--用来display div的宽度默认为字体的宽度-->
<!--命名的时候需要见名知意-->
<!--所有命名的时候应该全英文  css  全小写 如果有两个单词，则中间用破折线 user-name
 class="user-name password"
-->
<!--每一个页面对于属于自己css，建议不允许引入不属于自己的文件-->
<div class="home">
    <div>
        <div id="top">

        </div>
        <div class="middle">
            <div>
                <div>
                    <div class="title">新闻动态</div>
                    <div class="news content">
                        <div><img src="../img/m331.jpg" height="190" width="200"/></div>
                        <div>
                            <div>
                                <div>日本较大抹茶餐饮七叶和茶登陆上海</div>
                                <div>
                                    日本较大的抹茶餐饮连锁正式登陆日本较大的抹茶餐饮连锁正式登陆日本较大的抹茶餐饮连锁正式登陆日本较大的抹茶餐饮连锁正式登陆日本较大的抹茶餐饮连锁正式登陆日本较大的抹茶餐饮连锁正式登陆日本较大的抹茶餐饮连锁正式登陆日本较大的抹茶餐饮连锁正式登陆，上海，其中
                                </div>

                            </div>
                            <div>
                                <div>日本较大抹茶餐饮七叶和茶登陆上海</div>
                                <div> 日本较大的抹茶餐饮连锁正式登陆，上海，其中</div>

                            </div>
                            <div>
                                <div>日本较大抹茶餐饮七叶和茶登陆上海</div>
                                <div> 日本较大的抹茶餐饮连锁正式登陆，上海，其中</div>

                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="title">产品展示</div>
                    <div class="product content">
                        <div>
                            <div><img src="../img/hongshaoshizitou.jpg" height="300" width="300"/></div>
                            <div>红烧狮子头</div>
                            <div>青菜，猪肉，面粉，辣椒，盐</div>
                        </div>
                        <div>
                            <div><img src="../img/hongshaoshizitou.jpg" height="300" width="300"/></div>
                            <div>红烧狮子头</div>
                            <div>青菜，猪肉，面粉，辣椒，盐</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--        不要到处定义div -->

        <div id="foot">

        </div>
    </div>
</div>

<!--<script type="text/javascript">-->
<!--    //在js中引入-->
<!--    //如果用js 我们建议不要用类选择器，要用id选择器-->
<!--    //css 用class   js  用id-->
<!--    $(document).ready(function () {-->
<!--        $('#top').load('top.html');-->
<!--        $('#foot').load('foot.html');-->
<!--    });-->
<!--</script>-->
</body>
</html>